<script>
export default {
  name: "",
  data() {
    return {
      riqi: "",
      region: "",
      pickerOptions: {
        shortcuts: [
          {
            text: "今天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "昨天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              console.log("start.getTime()", start.getTime());
              console.log("日期", this.riqi);
              start.setTime(start.getTime() - 3600 * 1000 * 24);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近三天",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 3);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一周",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 7);
              picker.$emit("pick", [start, end]);
            },
          },
          {
            text: "最近一个月",
            onClick(picker) {
              const end = new Date();
              const start = new Date();
              start.setTime(start.getTime() - 3600 * 1000 * 24 * 30);
              picker.$emit("pick", [start, end]);
            },
          },
        ],
      },
    };
  },
  //   watch:{
  //   riqi:{
  //     handler(){
  //       console.log('日期',this.riqi);
  //     },
  //      deep:true
  //   }
  // }
};
</script>
<template>
  <div>
    <div class="header">
      <div class="search my-4 py-4 bg-opacity-5">
        <el-form
          :label-position="labelPosition"
          label-width="160px"
          :model="formLabelAlign"
        >
          <el-row :gutter="30">
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="6">
              <div class="date-opt">
                <el-select
                  clear="pr-4"
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="创建时间" value="shanghai"></el-option>
                  <el-option label="适应时间" value="beijing"></el-option>
                  <el-option label="开船时间" value="beijing"></el-option>
                  <el-option label="到港时间" value="beijing"></el-option>
                </el-select>
              </div>
              <el-form-item label-width="0">
                <div class="flex py-4">
                  <el-date-picker
                    v-model="riqi"
                    type="daterange"
                    :picker-options="pickerOptions"
                    range-separator="至"
                    start-placeholder="开始日期"
                    end-placeholder="结束日期"
                    align="right"
                  >
                  </el-date-picker>
                </div>
              </el-form-item>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="4">
              <el-form-item label="报关公司:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="时效/运输方式:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="4" :sm="6" :md="8" :lg="9" :xl="4">
              <el-form-item label="承运商:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="车辆状态:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :xs="8" :sm="6" :md="4" :lg="3" :xl="4">
              <el-form-item label="创建人:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
              <el-form-item label="仓库:" prop="region">
                <el-select
                  size="mini"
                  v-model="region"
                  placeholder="请选择活动区域"
                >
                  <el-option label="区域一" value="shanghai"></el-option>
                  <el-option label="区域二" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </el-col>
          </el-row>
        </el-form>
      </div>
    </div>
  </div>
</template>

<style lang="scss">
// 设置日期的宽度
.el-date-editor.el-input {
  width: 100%;
}
</style>


